<template>
	<nav class="navigation">
        <ul>
            <li :class="{active:tabindex==index}" v-for="(i,index) in bar" :key="index" @click="selec(index)"><a ><span :class="i.icon"></span><p>{{i.bname}}</p></a></li>
          
        </ul>
    </nav>
</template>

<script>
	export default{
		data(){
			return{
				tabindex:0,
				bar:[
					{bname:"首页",icon:'icon-home'},
					{bname:"分类",icon:'icon-category'},
					{bname:"我的",icon:'icon-user'}
				]
			}
		},
		methods:{
			selec(index){
				this.tabindex=index
			
				this.$store.dispatch('whichse',index)
			}
		}
	}
</script>

<style>
	
/*Navigation*/
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border-top: 1px solid #ddd;
  background: #FAFAFA;
  z-index: 99;
}
.navigation .icon-home {
  background: url("//img02.hua.com/m/icon/home_icon_new.png") no-repeat center center;
}
.navigation .icon-category {
  background: url("//img02.hua.com/m/icon/classify_icon_new.png") no-repeat center center;
}
.navigation .icon-shopcar {
  background: url("//img02.hua.com/m/icon/cart_icon_new.png") no-repeat center center;
}
.navigation .icon-user {
  background: url("//img02.hua.com/m/icon/my_icon_new.png") no-repeat center center;
}
.navigation .icon-flowerlove {
  background: url("https://img02.hua.com/m/icon/cate-love.png") no-repeat center center;
}
.navigation .icon-flowerfriend {
  background: url("https://img02.hua.com/m/icon/cate-friend.png") no-repeat center center;
}
.navigation .icon-flowerparent {
  background: url("https://img02.hua.com/m/icon/cate-parent.png") no-repeat center center;
}
.navigation .icon-flowerbusniess {
  background: url("https://img02.hua.com/m/icon/cate-business.png") no-repeat center center;
}
.navigation .icon-home,
.navigation .icon-category,
.navigation .icon-shopcar,
.navigation .icon-user {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  vertical-align: bottom;
}
.navigation .icon-badge {
  position: absolute;
  top: -3px;
  left: 60%;
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  background: #f60;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-style: normal;
  display: none;
}
.navigation ul:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.navigation ul:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.navigation ul li {
  float: left;
  width: 33%;
  text-align: center;
  font-size: 10px;
}
.navigation ul li:nth-child(3) span {
  position: relative;
}
.navigation ul li a {
  display: block;
  height: 48px;
  font-size: 26rpx;
  color: #494949;
  padding: 5px 0 0;
  box-sizing: border-box;
}

.navigation ul li.active a {
  color: #ff6a00;
}
.navigation ul li.active .icon-home {
  background-image: url(//img02.hua.com/m/icon/home_icon_click_new.png);
}
.navigation ul li.active .icon-category {
  background-image: url(//img02.hua.com/m/icon/classify_icon_click_new.png);
}
.navigation ul li.active .icon-shopcar {
  background-image: url(//img02.hua.com/m/icon/cart_icon_click_new.png);
}
.navigation ul li.active .icon-user {
  background-image: url(//img02.hua.com/m/icon/my_icon_click_new.png);
}
</style>